<template>
  <div class="addUser public">
    <!-- 面包屑 -->
    <el-breadcrumb separator=">" class="crumbs">
        <el-breadcrumb-item :to="{ path: '/user'}">用户信息</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/addUser'}">添加新用户</el-breadcrumb-item>
      </el-breadcrumb>
    <!-- 添加用户的列表 -->
    <el-row  :gutter="20">
        <el-col :span="4">&emsp;</el-col>
        <el-col :span="16">
            <el-col :span="8" class="addUserInfo addUserInfoText">用户姓名</el-col><el-col class="addUserInfo" :span="16"><el-input @keyup.native="delSpace('realname')" placeholder="请输入2-8位字符" v-model="realname" @blur="isOK('realname')"></el-input></el-col>
            <el-col :span="8" class="addUserInfo addUserInfoText">用户账号</el-col><el-col class="addUserInfo" :span="16"><el-input @keyup.native="delSpace('username')" placeholder="请输入3-20位字符"  v-model="username"  @blur="isOK('username')"></el-input></el-col>
            <el-col :span="8" class="addUserInfo addUserInfoText">用户密码</el-col><el-col class="addUserInfo" :span="16"><el-input @keyup.native="delSpace('password')" type='password' v-model="password"  placeholder="请输入6-20位密码" @blur="isOK('password1')"></el-input></el-col>
            <el-col :span="8" class="addUserInfo addUserInfoText">确认密码</el-col><el-col class="addUserInfo" :span="16"><el-input @keyup.native="delSpace('confirmPassword')" type='password' v-model="confirmPassword"  placeholder="请再次输入用户密码" @blur="isOK('password2')"></el-input></el-col>
            <el-col :span="8" class="addUserInfo addUserInfoText">手机号码</el-col><el-col class="addUserInfo" :span="16"><el-input @keyup.native="delSpace('mobile')" placeholder="输入11位手机号码" v-model="mobile" @blur="isOK('tell')"></el-input></el-col>
            <el-col :span="8" class="addUserInfo addUserInfoText">电子邮箱</el-col><el-col class="addUserInfo" :span="16"><el-input @keyup.native="delSpace('email')" placeholder="输入电子邮箱" v-model="email" @blur="isOK('email')"></el-input></el-col>
            <el-col :span="8" class="addUserInfo addUserInfoText">职位</el-col>
            <el-col :span="16"  class="addUserInfo">
               <el-select v-model="positionId" placeholder="请选择" class="selectBox">
                <el-option v-for="item in positions":key="item.value":label="item.positionName":value="item.id">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="8"  class="addUserInfo addUserInfoText">所属机构</el-col>
            <el-col :span="16"  class="addUserInfo">
              <el-select v-model="organizationId" placeholder="请选择"  class="selectBox">
                <el-option v-for="item in organList":key="item.value":label="item.name":value="item.id">
                </el-option>
              </el-select>
            </el-col>
        </el-col>
        <el-col :span="4">&emsp;</el-col>
        
      </el-row>
    
    <!-- 添加列表完成  以下是按钮 -->
    <el-row class="addUserBtn">
      <el-col :sm="9" :xs="6">&emsp;</el-col>
      <el-col :sm="3" :xs="6"><el-button type="primary" @click="saveNewUser">保存</el-button></el-col>
      <el-col :sm="3" :xs="6"><el-button @click='cancelSave'>取消</el-button></el-col>
      <el-col :sm="9" :xs="6">&emsp;</el-col>
    </el-row>
  </div>

</template>

<script>
export default {
  name: 'addUser',
  data () {
    return {
      // 添加信息
      realname:'',
      username:'',
      password:'',
      mobile:'',
      email:'',
      positions: [],
      organList:[],
      positionId:'',
      organizationId: '',
      confirmPassword:'',
      exist:false,
      phoneExist:false,
      emailExist:false
    }
  },
  methods:{
    delSpace (str) {
      this[str]  = this[str].replace(/\s/g,"");
    },
    // 确认信息
    isOK(type){
      switch (type){
        // 用户名
        case 'realname':
          if(this.realname.length < 2 || this.realname.length > 8){
            this.$message({
              type:'error',
              message:'用户姓名长度有误',
              duration:1500,
              showClose:true
            });
          }
        break;
        // 检测密码
        case 'password1':
        if(this.password.length > 20 || this.password.length < 6){
          this.$message({
            type:'error',
            message:'密码长度应为6-20位字符',
            duration:1500,
            showClose:true
          });
        }
        break;
        case 'password2':
          if(this.password !== this.confirmPassword){
            this.$message({
              type:'error',
              message:'两次密码有误，请重新确认密码',
              duration:1500,
              showClose:true
            });
          }
          break;
          // 检测电话号码
          case 'tell':
          if(!this.mobile){
            return
          }
          if(!/^1[3|4|5|7|8][0-9]\d{8}$/.test(this.mobile)){
            this.$message({
              type:'error',
              message:'请输入11位手机号码',
              duration:1500,
              showClose:true
            });
            return
          }
          $.get(this._path + "/users/mobile/exist",{mobile:this.mobile},res=>{
              if(res.code == 'SUCCESS'){
                if(res.data.exist){
                  this.$message({
                    type:'warning',
                    message:'手机号码已存在',
                    duration:1500,
                    showClose:true
                  });
                  this.mobile = ''
                  this.phoneExist = true;
                }else{
                  this.phoneExist = false;
                }
              }else{
                this.requestError(res,this)
              }
            })
          break;
          // 检测用户账号长度
          case 'username':
           if(!this.username){
            return
          }
          if(!this.exist){
            if(!/^[0-9a-zA-Z]{3,20}$/g.test(this.username) ){
              this.$message({
                type:'error',
                message:'用户账号应为3-20位字母或数字',
                duration:1500,
                showClose:true
              });
              return
            }
          }
            
          $.get(this._path + "/users/exist",{username:this.username},(res)=>{
            if(res.code == 'SUCCESS'){
                if(res.data.exist){
                  this.$message({
                    type:'warning',
                    message:'用户账号已存在',
                    duration:1500,
                    showClose:true
                  });
                  this.exist = true;
                  this.username = '';
                }else{
                  this.exist = false;
                }
              }else{
                this.requestError(res,this)
              }
            
          })
          break;
          case 'email':
          if(!this.email){
            return
          }
          if(!/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(this.email)){
            this.$message({
              type:'error',
              message:'请输入正确邮箱',
              duration:1500,
              showClose:true
            });
            return
          }
          $.get(this._path + "/users/email/exist",{email:this.email},res=>{
              if(res.code == 'SUCCESS'){
                if(res.data.exist){
                  this.$message({
                    type:'warning',
                    message:'邮箱已存在',
                    duration:1500,
                    showClose:true
                  });
                  this.email = ''
                  this.emailExist = true;
                }else{
                  this.emailExist = false;
                }
              }else{
                this.requestError(res,this)
              }
            })
          break;
       
      }
    },
    saveNewUser () {
      var params = {
        realname:this.realname,
        username:this.username,
        password:this.password,
        mobile:this.mobile,
        email:this.email,
        positionId:this.positionId,
        orgId: this.organizationId
      }
      if(this.realname.length > 8 || this.realname.length < 2){
        this.$message({
          type:'error',
          message:'请按提示输入用户姓名',
          duration:1500,
          showClose:true
        });
        return
      }
      if(!/^[0-9a-zA-Z]{3,20}$/g.test(this.username)){
        this.$message({
          type:'error',
          message:'用户账号应为3-20位字母或数字',
          duration:1500,
          showClose:true
        });
        return
      }
      if(this.password.length > 20 || this.password.length < 6){
        this.$message({
          type:'error',
          message:'密码长度应为6-20位字符',
          duration:1500,
          showClose:true
        });
        return
      }
      if(this.password !== this.confirmPassword){
        this.$message({
          type:'error',
          message:'两次密码有误，请重新确认密码',
          duration:1500,
          showClose:true
        });
        return
      }
      if(!/^1[3|4|5|7|8][0-9]\d{8}$/.test(this.mobile)){
        this.$message({
          type:'error',
          message:'请输入11位手机号码',
          duration:1500,
          showClose:true
        });
        return
      }
      if(!/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(this.email)){
        this.$message({
          type:'error',
          message:'请输入正确电子邮箱',
          duration:1500,
          showClose:true
        });
        return
      }
      if(!this.positionId) {
        this.$message({
          type:'error',
          message:'请选择职位',
          duration:1500,
          showClose:true
        });
        return
      }
      if(!this.organizationId) {
        this.$message({
          type:'error',
          message:'请选择机构',
          duration:1500,
          showClose:true
        });
        return
      }
      if(this.exist){
        this.$message({
          type:'error',
          message:'用户账号已存在',
          duration:1500,
          showClose:true
        });
        this.username = '';
        return
      }
      if(this.emailExist){
        this.$message({
          type:'error',
          message:'用户邮箱已存在',
          duration:1500,
          showClose:true
        });
        this.email = '';
        return
      }if(this.phoneExist){
        this.$message({
          type:'error',
          message:'用户手机号码已存在',
          duration:1500,
          showClose:true
        });
        this.mobile = '';
        return
      }
      // return
      this.$http({
        url:this._path + "/users",
        headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        },
        method:"POST",
        data:Qs.stringify(params)
      }).then((res)=>{
        if(res.data.code == 'SUCCESS'){
          this.$message({
            message: '添加成功',
            type: 'success',
            duration:1500,
            showClose:true
          });
          this.$router.push('/user')
        }else{
            this.requestError(res.data,this)
        }
      })
      
      
      
    },
    cancelSave() {
      this.$router.push('/user')
    }
  },
  created () {
    var params = {
      params: {
        userId : 1
      }
    }
    this.$http.get(this._path + '/organizations',params).then((res)=>{
        
        if('SUCCESS' == res.data.code){
          this.organList = res.data.data.organizations;
        }else{
            this.requestError(res.data,this)
        }
    })
    this.$http.get(this._path + '/positionManage',params).then((res)=>{
        
        if('SUCCESS' == res.data.code){
          this.positions = res.data.data.positions;
        }else{
            this.requestError(res.data,this)
        }
    })
  }
}
</script>

<style scoped lang="scss">
@import "./../style/addUser.scss";
@import "./../style/public.scss"
</style>
